<template>
    <!--拍卖专场  更多-->
    <div class="paimai-more">
        <!--标题-->
        <div class="pai-more-header">
            <span class="title"><em>{{dayData[dayNavIndex].title}}</em>{{dayData[dayNavIndex].title2}}</span>
            <s class="line"></s>
        </div>
        <!--左边-->
        <div class="pai-more-left">
            <!--专场导航-->
            <div class="main-special-title">
                <a href="javascript:;" :class="{'current':dayNavIndex === 0}"
                   @click="selectDayNav(0)">今日专场(<span>44</span>)<s></s></a>
                <i style=""></i>
                <a href="javascript:;" :class="{'current':dayNavIndex === 1}"
                   @click="selectDayNav(1)">明日专场(<span>29</span>)<s></s></a>
                <i style=""></i>
                <a href="javascript:;" :class="{'current':dayNavIndex === 2}"
                   @click="selectDayNav(2)">昨日回顾(<span>19</span>)<s></s></a>
            </div>
            <!--内容-->
            <div class="pai-more-content">
                <el-collapse-transition>
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                </el-collapse-transition>
            </div>
        </div>
        <!--右边-->
        <div class="pai-more-right">
            <!--头部公告-->
            <div class="ks-tabs right-notice J_RightNotice">
                <div class="ks-tabs-bar ks-tabs-bar-focused ks-toolbar-focused" style="user-select: none;">

                    <div class="ks-tabs-tab" v-for="(item,index) in tagObj.navTagObj" :key="index"
                         style="width: 33.3333%; user-select: none;"
                         :class="{'ks-tabs-tab-selected' : tagObj.navTagSelectIndex===item.index}"
                         @mouseover="tagObj.navTagSelectIndex = item.index"
                    >
                        <span class="tab-inner">{{item.name}}</span>
                    </div>
                </div>
                <div class="ks-tabs-body" id="ks-component512">

                    <div class="ks-tabs-panel"
                         v-for="(item,index) in tagObj.navTagObj"
                         :key="index"
                         :class="{'ks-tabs-panel-selected' : tagObj.navTagSelectIndex === item.index}">
                        <div class="tab-content" style="height: 48px; overflow: hidden; width: 248px;">
                            <div class="tab-content-trans" :class="{'less' : item.isLess}">
                                <div class="tab-pannel" v-for="(conList,index) in item.content" :key="index"
                                     style="float: none; overflow: hidden; height: 48px; display: block;">
                                    <a :href="conObj.href" @click="$store.dispatch('invalidBtnAlertAction')"
                                       target="_blank" class=""
                                       v-for="(conObj,index) in conList" :key="index"
                                    >{{conObj.text}}</a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PaimaiMore",
        data() {
            return {
                /*左边专场导航选中下标*/
                dayNavIndex: 0,
                dayData: [
                    {title: '今', title2: '日专场', routerName: 'pai-more-today'},
                    {title: '明', title2: '日专场', routerName: 'pai-more-tomorrow'},
                    {title: '昨', title2: '日回顾', routerName: 'pai-more-yesterday'},
                ],
                /*右边Tag对象*/
                tagObj: {
                    /*选择NavTag下标*/
                    navTagSelectIndex: 0,
                    navTagObj: [
                        {
                            index: 0,
                            name: "公告",
                            isLess: false,
                            content: [
                                [
                                    {
                                        href: "javascript:;",
                                        text: "违规处理公告"
                                    },
                                    {
                                        href: "javascript:;",
                                        text: "拍卖商家“四不要”（廉政合规类）"
                                    }
                                ],
                                [
                                    {
                                        href: "javascript:;",
                                        text: "合作机构违规清退公告"
                                    },
                                    {
                                        href: "javascript:;",
                                        text: "加强对严重影响买家体验行为的处理"
                                    },
                                ]
                            ],
                        },
                        {
                            index: 1,
                            name: "规则",
                            isLess: true,
                            content: [[{
                                href: "javascript:;",
                                text: "拍卖平台管理规范"
                            }, {
                                href: "javascript:;",
                                text: "假一赔三服务标准"
                            }]],
                        },
                        {
                            index: 2,
                            name: "帮助",
                            isLess: true,
                            content: [[{
                                href: "javascript:;",
                                text: "什么是拍卖保证金？"
                            }, {
                                href: "javascript:;",
                                text: "什么是买家佣金？"
                            }]],
                        },
                    ],
                },
            }
        },
        methods: {
            /*专场导航*/
            selectDayNav: function (index) {
                this.dayNavIndex = index
                this.$router.push({name: this.dayData[index].routerName})
            },
        },
    }
</script>

<style lang="less" scoped>
    .paimai-more {
        width: 1200px;
        margin: auto;
        font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;

        a {
            cursor: pointer;
        }

        /*标题*/

        .pai-more-header {
            position: relative;
            line-height: 62px;
            height: 62px;
            text-align: center;
            margin: 50px 0;

            .title {
                position: relative;
                padding: 0 10px;
                font-size: 34px;
                color: #000;
                letter-spacing: 0.2em;
                background-color: #fff;
                z-index: 1;

                em {
                    color: #800019;
                    font-style: normal;
                    font-size: 30px;
                }
            }

            .line {
                position: absolute;
                top: 30px;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: #000;
            }
        }

        /*左边*/

        .pai-more-left {
            float: left;
            width: 886px;


            /*专场导航*/

            .main-special-title {
                border-bottom: 2px solid #800019;
                margin-left: 1px;
                margin-bottom: 10px;
                font-family: "Microsoft YaHei";
                font-weight: 700;

                a {
                    position: relative;
                    top: 2px;
                    border: 2px solid transparent;
                    display: block;
                    float: left;
                    color: #353530;
                    text-decoration: none;
                    font-size: 18px;
                    height: 38px;
                    line-height: 38px;
                    text-align: center;
                    padding: 0 10px;

                    span {
                        font-family: tahoma;
                    }
                }

                a.current {
                    margin: 0 -1px;
                    padding: 0 11px;
                    color: #800019;
                    border: 2px solid #800019;

                    s {
                        position: absolute;
                        bottom: -2px;
                        height: 2px;
                        width: 100%;
                        left: 0;
                        background: #fff;
                    }
                }
            }

            .main-special-title:after { /*消除浮动，避免没高度*/
                content: "";
                display: block;
                clear: both;
            }

            /*内容*/

            .pai-more-content {
                margin-bottom: 20px;
                min-height: 464px;

            }
        }

        /*右边*/

        .pai-more-right {
            float: left;
            margin-left: 24px;
            width: 280px;

            /*头部公告*/

            .right-notice {
                margin-top: 63px;
                margin-bottom: 15px;
                border: 1px solid #e8e8e8;

                .ks-tabs-bar {
                    padding: 0 18px;
                    height: 40px;
                    color: #666;
                    font-size: 14px;
                    background-color: #F6F6F6;

                    .ks-tabs-tab {
                        float: left;
                        height: 38px;
                        line-height: 38px;
                        text-align: center;
                        cursor: pointer;

                        .tab-inner {
                            margin: 0 auto;
                            padding: 0 9px;
                            display: inline-block;
                            border-bottom: 2px solid #F6F6F6;
                        }
                    }

                    /*选择中的tab*/

                    .ks-tabs-tab-selected {
                        color: #333;
                        font-weight: 700;

                        .tab-inner {
                            border-color: #820e15;
                        }
                    }
                }

                .ks-tabs-body {
                    padding: 16px 15px 14px;
                    height: 38px;

                    .ks-tabs-panel {
                        display: none;

                        .tab-content {
                            position: relative;

                            .tab-content-trans {
                                position: absolute;
                                height: 96px;
                                overflow: hidden;
                                top: 0;
                                backface-visibility: hidden;
                                animation: move 10s infinite linear;
                            }

                            .tab-content-trans.less {
                                animation: none;
                            }

                            @keyframes move {
                                0% {
                                    transform: translate3d(0px, 0px, 0px);
                                }
                                40% {
                                    transform: translate3d(0px, 0px, 0px);
                                }
                                50% {
                                    transform: translate3d(0px, -48px, 0px);
                                }
                                90% {
                                    transform: translate3d(0px, -48px, 0px);
                                }
                                100% {
                                    transform: translate3d(0px, 0px, 0px);
                                }
                            }

                            .tab-pannel {
                                a {
                                    display: block;
                                    margin-bottom: 10px;
                                    height: 14px;
                                    width: 248px;
                                    line-height: 14px;
                                    color: #666;
                                    text-decoration: none;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                }

                                a:hover {
                                    color: rgb(130, 14, 21);
                                }
                            }
                        }
                    }

                    .ks-tabs-panel-selected {
                        display: block;
                        height: 38px;
                        overflow: hidden;
                    }
                }
            }
        }
    }

    /*清除浮动*/
    .paimai-more:after {
        content: "";
        display: block;
        clear: both;
    }
</style>